<template>
  <div class="main-layout">
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <!-- 项目信息 -->
        <div class="project-info">
          <el-icon size="16" color="#409EFF"><Folder /></el-icon>
          <span class="project-name">{{ currentProject?.name || '未打开项目' }}</span>
          <el-button 
            text 
            size="small" 
            @click="closeProject" 
            v-if="currentProject"
            class="close-button"
          >
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        
        <el-divider direction="vertical" />
        
        <el-button-group>
          <el-button type="primary" @click="newSimulation">
            <el-icon><DocumentAdd /></el-icon>
            新建仿真
          </el-button>
          <el-button @click="openConfig">
            <el-icon><FolderOpened /></el-icon>
            打开配置
          </el-button>
          <el-button @click="saveConfig">
            <el-icon><Document /></el-icon>
            保存配置
          </el-button>
        </el-button-group>
        
        <el-divider direction="vertical" />
        
        <el-button-group>
          <el-button @click="resetParams">
            <el-icon><Refresh /></el-icon>
            重置参数
          </el-button>
          <el-button @click="showConfig">
            <el-icon><Setting /></el-icon>
            配置管理
          </el-button>
        </el-button-group>
      </div>
      
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <router-view />
    </div>

    <!-- 底部状态栏 -->
    <StatusBar 
      :status="currentStatus"
      :status-text="statusText"
      :status-type="statusTypeComputed"
      :show-log="showLogPanel"
      @toggle-log="toggleLogPanel"
    />

    <!-- 日志面板 -->
    <el-collapse-transition>
      <LogPanel v-show="showLogPanel" :logs="logs" @clear="clearLogs" />
    </el-collapse-transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import LogPanel from '@/components/LogPanel.vue'
import { defineAsyncComponent } from 'vue'

const StatusBar = defineAsyncComponent(() => import('@/components/StatusBar.vue'))

// 使用全局常量
const SIMULATION_STATUS = getCurrentInstance()?.appContext.config.globalProperties.$SIMULATION_STATUS
const STATUS_TYPES = getCurrentInstance()?.appContext.config.globalProperties.$STATUS_TYPES
import projectService, { type ProjectInfo } from '@/services/projectService'

// 使用全局router
const router = getCurrentInstance()?.appContext.config.globalProperties.$router

// 路由导航函数
const navigateTo = (path: string) => {
  if (router) {
    router.push(path)
  }
}

// 当前项目
const currentProject = ref<ProjectInfo | null>(null)

// 状态栏状态
const currentStatus = ref(SIMULATION_STATUS.WAITING)
const statusText = ref('准备就绪')

// 日志面板
const showLogPanel = ref(false)
const logs = computed(() => getCurrentInstance()?.appContext.config.globalProperties.$logUtils.getLogs() || [])

// 清空日志
const clearLogs = () => {
  getCurrentInstance()?.appContext.config.globalProperties.$logUtils.clearLogs()
}

// 计算状态类型
const statusTypeComputed = computed(() => {
  return STATUS_TYPES[currentStatus.value] || 'info'
})

// 工具栏功能
const newSimulation = () => {
  ElMessage.info('新建仿真功能')
}

const openConfig = () => {
  navigateTo('/config')
}

const saveConfig = () => {
  ElMessage.info('保存配置功能')
}

const resetParams = () => {
  ElMessage.info('重置参数功能')
}


const showConfig = () => {
  navigateTo('/config')
}



// 关闭项目
const closeProject = () => {
  projectService.closeCurrentProject()
  currentProject.value = null
  ElMessage.success('项目已关闭')
  navigateTo('/welcome')
}

// 切换日志面板
const toggleLogPanel = () => {
  showLogPanel.value = !showLogPanel.value
}

// 添加日志
const addLog = (level: 'info' | 'warn' | 'error' | 'success', message: string) => {
  getCurrentInstance()?.appContext.config.globalProperties.$logUtils.addLog(level, message)
}


// 生命周期
onMounted(() => {
  // 加载当前项目
  currentProject.value = projectService.getCurrentProject()
  
})

onUnmounted(() => {
  // 清理事件监听
})

// 暴露方法给子组件使用
defineExpose({
  addLog,
  updateStatus: (status: string, text: string) => {
    currentStatus.value = status as any
    statusText.value = text
  }
})
</script>

<style scoped>
.main-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.toolbar {
  height: 50px;
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-size: 14px;
  color: #0369a1;
}

.project-name {
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 关闭按钮样式 */
.close-button {
  color: #ffffff !important;
  transition: all 0.2s ease;
}

.close-button:hover {
  color: #f56c6c !important;
  background-color: rgba(245, 108, 108, 0.1) !important;
}

/* 确保图标颜色为白色 */
.close-button .el-icon {
  color: #ffffff !important;
  --color: #ffffff !important;
}

.close-button:hover .el-icon {
  color: #f56c6c !important;
  --color: #f56c6c !important;
}

/* 深色主题下的关闭按钮 */
@media (prefers-color-scheme: dark) {
  .close-button {
    color: #ffffff !important;
  }
  
  .close-button:hover {
    color: #f56c6c !important;
    background-color: rgba(245, 108, 108, 0.2) !important;
  }
  
  .close-button .el-icon {
    color: #ffffff !important;
    --color: #ffffff !important;
  }
  
  .close-button:hover .el-icon {
    color: #f56c6c !important;
    --color: #f56c6c !important;
  }
}

/* 深色主题下的项目信息区域 */
@media (prefers-color-scheme: dark) {
  .project-info {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
  }
}

/* 通用深色主题支持 */
.dark .close-button {
  color: #ffffff !important;
}

.dark .close-button:hover {
  color: #f56c6c !important;
  background-color: rgba(245, 108, 108, 0.2) !important;
}

.dark .close-button .el-icon {
  color: #ffffff !important;
  --color: #ffffff !important;
}

.dark .close-button:hover .el-icon {
  color: #f56c6c !important;
  --color: #f56c6c !important;
}

.dark .project-info {
  background: #2d3748 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
}

/* 深色背景下的关闭按钮增强 */
.close-button {
  position: relative;
}

.close-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.close-button:hover::before {
  opacity: 1;
}

.dark .close-button::before {
  background: rgba(255, 255, 255, 0.1);
}

.main-content {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

/* 响应式工具栏 */
@media (max-width: 768px) {
  .toolbar {
    height: 45px;
    padding: 0 8px;
  }
  
  .toolbar-left,
  
  .toolbar :deep(.el-button) {
    font-size: 12px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .toolbar {
    height: 40px;
    flex-direction: column;
    gap: 4px;
    padding: 4px 8px;
  }
  
  .toolbar-left {
    width: 100%;
    justify-content: center;
  }
  
  .toolbar :deep(.el-button) {
    font-size: 11px;
    padding: 4px 8px;
  }
}


</style>
